<template>
  <div id="design" ref="design" class="design" @mousedown="handleMouseDown">
    <div
      class="grid-box"
      :style="{
        gridTemplateColumns: `repeat(${$parent.layoutConfig.col}, 1fr)`,
        gridTemplateRows: `repeat(${$parent.layoutConfig.row}, 1fr)`,
      }"
    >
      <div
        class="grid-item"
        v-for="ele in $parent.layoutConfig.col * $parent.layoutConfig.row"
        :key="ele"
        :style="{ background: isHuaRu == ele ? 'rgb(247, 247, 247)' : '' }"
        :class="[
          ele % $parent.layoutConfig.col == 0 ? 'no-right' : '',
          ele >
          $parent.layoutConfig.col * $parent.layoutConfig.row -
            $parent.layoutConfig.col
            ? 'no-bottom'
            : '',
        ]"
      ></div>
    </div>
    <div class="grid-true" :style="[gridInfo]"></div>
    <!-- 网格线 -->
    <Grid />
    <!-- 组件区域 -->
    <DesignShape
      ref="shape"
      v-for="(item, index) in complexList"
      :key="index"
      :element="item"
      :zoom="zoom"
      :light-info="lightInfo"
      @handleContext="handleContext"
      @exportFun="exportFun"
    >
      <component
        :is="item.name"
        :config="item"
        :complex="item"
        :count="item.count"
      />
    </DesignShape>
    <!-- 选框 -->
    <SelectFrame :status="isFraming" :config="frame" />
  </div>
</template>

<script>
import Grid from "./components/Grid";
import DesignShape from "./components/DesignShape";
import SelectFrame from "./components/SelectFrame";
export default {
  components: {
    DesignShape,
    Grid,
    SelectFrame,
  },
  props: {
    zoom: Number,
    row: {
      typeof: String,
    },
    col: {
      typeof: String,
    },
    complexItem: {
      typeof: Object,
    },
    complexList: {
      type: Array,
    },
  },
  data() {
    return {
      isHuaRu: -1,
      isEdit: true,
      isFraming: false,
      frame: {
        clientX: 0,
        clientY: 0,
        opacity: 0,
        x: 0,
        y: 0,
        w: 0,
        h: 0,
      },
      // 右键菜单
      contextMenu: {
        show: false,
        left: 0,
        top: 0,
        z: 1024,
      },
      selectComponents: null,
      lightInfo: {
        x: 0,
        y: 0,
        w: 0,
        h: 0,
      },
      gridInfo: {
        width: 0,
        height: 0,
        top: 0,
        left: 0,
      },
    };
  },
  methods: {
    //高亮
    exportFun(val) {
      let flag = false;
      let arr = [];
      let num = this.$parent.layoutConfig.row * this.$parent.layoutConfig.col;
      let itemWidth =
        this.$parent.layoutConfig.width / this.$parent.layoutConfig.col;
      let itemHeight =
        this.$parent.layoutConfig.height / this.$parent.layoutConfig.row;
      if (val.config.attr) {
        val.config.attr.forEach((ele) => {
          if (ele.formType == "layout-span") {
            flag = ele.data.status;
            if (flag) {
              this.lightInfo.w = ele.data.column * itemWidth;
              this.lightInfo.h = ele.data.row * itemHeight;
            } else {
              this.lightInfo.w = itemWidth;
              this.lightInfo.h = itemHeight;
            }
          } else {
            this.lightInfo.w = val.w;
            this.lightInfo.h = val.h;
          }
        });
      }
      for (let index = 0; index < num; index++) {
        let xx = 0,
          yy = 0;
        if (index + 1 < this.$parent.layoutConfig.col) {
          xx = index * itemWidth;
          yy = 0;
        } else if ((index + 1) % this.$parent.layoutConfig.col == 0) {
          xx = (this.$parent.layoutConfig.col - 1) * itemWidth;
          yy = ((index + 1) / this.$parent.layoutConfig.col - 1) * itemHeight;
        } else {
          xx = (((index + 1) % this.$parent.layoutConfig.col) - 1) * itemWidth;
          yy =
            (Math.ceil((index + 1) / this.$parent.layoutConfig.col) - 1) *
            itemHeight;
        }
        arr.push({
          x1: xx,
          y1: yy,
        });
      }
      arr.forEach((ele, index) => {
        (ele.x2 = ele.x1 + itemWidth), (ele.y2 = ele.y1 + itemHeight);
        if (
          val.x > ele.x1 &&
          val.y > ele.y1 &&
          val.x < ele.x2 &&
          val.y < ele.y2
        ) {
          if (flag) {
            this.gridInfo.top = ele.y1 + "px";
            this.gridInfo.left = ele.x1 + "px";
            this.gridInfo.width = val.w + "px";
            this.gridInfo.height = val.h + "px";
            this.lightInfo.w = val.w;
            this.lightInfo.h = val.h;
          } else {
            this.isHuaRu = index + 1;
          }
          this.lightInfo.x = ele.x1;
          this.lightInfo.y = ele.y1;
        }
      });
    },
    doubleContext() {
      console.log("1");
    },
    handleContext(data) {
      // this.selectComponents = data
      this.$emit("selectClick", data);
      this.$store.dispatch("design/settingMenu", {
        show: false,
        top: 0,
        left: 0,
      });
      this.complexList
        .map((item) => {
          item.focused = false;
          return item;
        })
        .filter((item) => item === data)
        .forEach((item) => {
          item.focused = true;
        });
    },
    // 鼠标按下事件
    handleMouseDown(e) {
      if (!this.complexItem) {
        e.preventDefault();
      }
      // console.log('鼠标按下事件')
      this.$store.dispatch("design/settingMenu", {
        show: false,
        top: 0,
        left: 0,
      });
      // 按下鼠标记录选框的起始点 初始化选框
      this.frame.x = e.offsetX;
      this.frame.y = e.offsetY;
      this.frame.clientX = e.clientX;
      this.frame.clientY = e.clientY;
      this.isFraming = true;
      this.clearWeightFocused();

      var that = this;
      const move = (moveEvent) => {
        // 绘制选择框
        if (!that.isFraming) {
          return;
        }

        that.setFrameArea(moveEvent);
      };

      const up = () => {
        document.removeEventListener("mousemove", move);
        document.removeEventListener("mouseup", up);
        that.stopFrameArea();
      };

      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", up);
    },
    // 清空选择区域
    stopFrameArea() {
      this.isFraming = false;
      this.frame.w = 0;
      this.frame.h = 0;
    },
    // 绘制矩形选框
    setFrameArea(e) {
      let screenTop = document
        .getElementById("design")
        .getBoundingClientRect().top;
      let screenLeft = document
        .getElementById("design")
        .getBoundingClientRect().left;
      if (e.clientX > this.frame.clientX && e.clientY > this.frame.clientY) {
        // 右下
        this.frame.w = (e.clientX - this.frame.clientX) / this.zoom;
        this.frame.h = (e.clientY - this.frame.clientY) / this.zoom;
      }

      // if (e.clientX > this.frame.clientX && e.clientY < this.frame.clientY) {
      // 	// 右上
      // 	this.frame.y = e.clientY - screenTop;
      // 	this.frame.w = (e.clientX - this.frame.clientX) / this.zoom;
      // 	this.frame.h = Math.abs(e.clientY - this.frame.clientY) / this.zoom;
      // }

      // if (e.clientX < this.frame.clientX && e.clientY < this.frame.clientY) {
      // 	// 左上
      // 	this.frame.y = e.clientY - screenTop;
      // 	this.frame.x = e.clientX - screenLeft;
      // 	this.frame.w = Math.abs(e.clientX - this.frame.clientX) / this.zoom;
      // 	this.frame.h = Math.abs(e.clientY - this.frame.clientY) / this.zoom;
      // }

      // if (e.clientX < this.frame.clientX && e.clientY > this.frame.clientY) {
      // 	// 左下
      // 	this.frame.x = e.clientX - screenLeft / this.zoom;
      // 	this.frame.w = Math.abs(e.clientX - this.frame.clientX) / this.zoom;
      // 	this.frame.h = Math.abs(e.clientY - this.frame.clientY) / this.zoom;
      // }
      this.setWeightFocused();
    },
    // 清空选中的组件
    clearWeightFocused() {
      this.complexList.map((item) => {
        item.focused = false;
        return item;
      });
    },
    // 更改组件的选中状态
    setWeightFocused() {
      this.complexList
        .map((item) => {
          item.focused = false;
          return item;
        })
        .filter(this.isFramingWeight)
        .forEach((item) => {
          item.focused = true;
        });
    },
    // 组件是否被选中
    isFramingWeight(item) {
      return !(
        item.x > this.frame.x + this.frame.w ||
        item.y > this.frame.y + this.frame.h ||
        this.frame.x > item.x + item.w ||
        this.frame.y > item.y + item.h
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.design {
  position: relative;
  width: 100%;
  height: 100%;
  // display: grid;
  // grid-template-columns: auto auto auto;
  // grid-template-rows: auto auto auto;
  // grid-gap: 20px 20px;

  .lock {
    opacity: 0.5;

    &:hover {
      cursor: not-allowed;
    }
  }

  .grid-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    // grid-gap: 20px 20px;
    // z-index: -1;
    .grid-item {
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      // z-index: 50;
    }
    .no-right {
      border-right: none;
    }
    .no-bottom {
      border-bottom: none;
    }
  }
  .grid-true {
    position: absolute;
    background: rgb(247, 247, 247);
  }
}
</style>
